<template>
	<view class="index-content">
		<u-navbar :is-back="false" title=" ">
			<view class="slot-wrap">
				<view class="nav-address" @click="locationShow = true">
					{{city}}<u-icon name="arrow-down"></u-icon>
				</view>
				<u-picker mode="region" v-model="locationShow" @confirm='locationConfirm'
					:params="{ province: true,city: true, area: false }"></u-picker>
				<view class="nav-title">爱房有车科技</view>
				<view></view>
			</view>
		</u-navbar>
		<view class="index-body">
			<u-swiper :list="swpierList" name="image_format" :border-radius="0" height="400" mode="rect"></u-swiper>
			<view class="menu-main">
				<view class="menu-item" @click="gotoNext(`/pages/${item.url}/index`)" v-for="item in NavigationsList"
					:key="item.id">
					<image :src="item.image_format" mode=""></image>
				</view>
				<!-- <view class="menu-item" @click="gotoNext('/pages/usedCar/index')">
					<image src="../../static/image/menu2.png" mode=""></image>
				</view> -->
			</view>
			<view class="index-list">
				<view class="list-title">
					<view class="title-left">
						<view class="column-line"></view>
						<view>最新出租</view>
					</view>
					<view class="title-right"></view>
				</view>
				<view class="query-list">
					<view class="list-item" v-for="item in queryList" :key="item.id" @click="gotoDetail(item.id)">
						<view class="item-image">
							<image :src="'https://afyc.chitong.cn/uploads/' + item.img" mode=""></image>
						</view>
						<view class="item-detail">
							<view class="item-label">{{item.category.name}}</view>
							<view class="item-price">租金： <text>{{item.zujin}}元</text> </view>
							<view class="item-type">户型：{{item.hux.name}}</view>
							<view class="item-tags">
								<view v-for="(tagItem,tagIndex) in item.biaoqian" :key="index"
									:class="tagItem.className">
									{{tagItem.name}}
								</view>
							</view>
							<view class="item-address">
								<image src="../../static/image/address.png" mode=""></image>
								<view>{{item.address}}</view>
							</view>
						</view>
						<view class="item-cancat" @click.stop="callIt(item.phone)">
							<image src="../../static/image/call.png" mode=""></image>
							<view>联系他/她</view>
						</view>
					</view>
				</view>
			</view>
			<view class="copyright">
				© 爱房有车科技版权所有
			</view>
		</view>
		<!-- <u-tabbar v-model="tabbarCurrent" :list="tabbarList"></u-tabbar> -->
		<Tabbar :tabbarCurrent="tabbarCurrent"></Tabbar>
	</view>
</template>

<script>
	import {
		getBannerList,
		getNavigationsList,
		getIndexRoomList
	} from '@/api/index.js'
	import QQMapWX from "@/common/qqmap-wx-jssdk.js"
	export default {
		data() {
			return {
				locationShow: false,
				NavigationsList: [],
				tabbarCurrent: 0,
				swpierList: [],
				queryList: [],
				city: '',
				isLogin: false,
			}
		},
		onLoad() {
			this.isLogin = uni.getStorageSync('isLogin')
			this.getCurrentLocation()
		},
		onShow() {
			this.city = uni.getStorageSync('city')
			this.getBannerList()
			this.getNavigationsList()
			this.getIndexRoomList()
		},
		methods: {
			getCurrentLocation() {
				let that = this
				let location = {
					longitude: 0,
					latitude: 0,
				}
				uni.getFuzzyLocation({
					type: 'gcj02',
					success(res) {
						location.longitude = res.longitude;
						location.latitude = res.latitude;
						const qqmapsdk = new QQMapWX({
							key: '5KUBZ-NICC3-OET3T-OKIPZ-WMMSK-W2FTL'
						})
						qqmapsdk.reverseGeocoder({
							location,
							success(response) {
								uni.setStorageSync('locationInfo', response.result.ad_info)
								uni.setStorageSync('city', response.result.ad_info.city)
								uni.setStorageSync('location', response.result.ad_info.location)
								// this.getBannerList()
								// this.getNavigationsList()
								that.city = uni.getStorageSync('city')
								that.getIndexRoomList()
							},
						});
					},
					fail(res) {
						if (res.errMsg == 'getLocation:fail auth deny') {

						}
					}
				})
			},
			locationConfirm(e) {
				uni.setStorageSync('city', e.city.label)
				this.city = e.city.label
				this.getIndexRoomList()
			},
			// 获取最新出租房列表
			getIndexRoomList() {
				let queryform = {
					city: this.city
				}
				let classArr = ['color1', 'color2', 'color3', 'color4']
				getIndexRoomList(queryform).then(res => {
					this.queryList = res.data.data
					this.queryList.forEach(item => {
						if (item.biaoqian !== null) {
							let index = 0
							item.biaoqian = item.biaoqian.split(',').map((ele) => {
								const className = classArr[index]
								index++;
								(index == 4) && (index == 0);
								return {
									className,
									name: ele
								}
							})
						}
					})
				})
			},
			// 获取轮播图列表
			getBannerList() {
				getBannerList().then(res => {
					this.swpierList = res.data
				})
			},
			// 获取导航栏列表
			getNavigationsList() {
				getNavigationsList().then(res => {
					this.NavigationsList = res.data
				})
			},

			gotoNext(url) {
				uni.navigateTo({
					url
				})
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/pages/houseDetail/index?pageStatus=0&roomId=' + id
				})
			},
			callIt(phoneNumber) {
				if (!this.isLogin) {
					uni.showModal({
						title: "提示",
						content: "登录后才能联系他/她",
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		padding: 0 20rpx;
		justify-content: space-between;
		width: 100%;
	}

	.menu-main {
		display: flex;
		padding: 45rpx 20rpx;
		justify-content: space-between;
		background-color: #fff;

		.menu-item {
			width: 340rpx;
			height: 170rpx;

			>image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.index-list {
		margin-top: 16rpx;


		.list-title {
			background-color: #fff;
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.title-left {
			font-weight: bold;
			display: flex;
			align-items: center;

			.column-line {
				width: 6rpx;
				height: 30rpx;
				border-radius: 25rpx;
				background: #4286F4;
				margin-right: 10rpx;
			}

		}

		.title-right {
			font-size: 24rpx;
			color: #666666;
		}


	}

	.query-list {
		padding: 20rpx;

		.list-item {
			background-color: #fff;
			border-radius: 8rpx;
			padding: 20rpx;
			display: flex;
			// justify-content: space-between;
			margin-top: 20rpx;

			.item-image {
				width: 200rpx;
				height: 200rpx;
				margin-right: 10rpx;

				>image {
					border-radius: 15rpx;
					width: 100%;
					height: 100%;
				}
			}

			.item-detail {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;

				.item-label {
					padding: 5rpx;
					font-size: 18rpx;
					background-color: #4286F4;
					border-radius: 5rpx;
					width: 80rpx;
					text-align: center;
					color: #fff;
				}

				.item-price {
					font-size: 26rpx;

					>text {
						color: #FE3939;
					}
				}

				.item-tags {
					display: flex;
					margin-right: 4rpx;
					font-size: 18rpx;

					>view {
						margin-right: 5rpx;
						border-radius: 5rpx;
						padding: 5rpx;
					}

					.color1 {
						color: #35A6EE;
						border: 1rpx solid #35A6EE;
					}

					.color2 {
						color: #F0962A;
						border: 1rpx solid #F0962A;
					}

					.color3 {
						color: #1FBF8C;
						border: 1rpx solid #1FBF8C;
					}

					.color4 {
						color: #FF5D38;
						border: 1rpx solid #FF5D38;
					}
				}

				.item-address {
					color: #666666;
					font-size: 20rpx;
					display: flex;
					align-items: center;

					>image {
						width: 17rpx;
						height: 22rpx;
						margin-right: 10rpx;
					}

				}
			}

			.item-cancat {
				margin-top: 10rpx;
				color: #666666;
				font-size: 18rpx;
				text-align: center;

				>image {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}

	}

	.copyright {
		margin: 50rpx 0;
		text-align: center;
		font-size: 22rpx;
		color: #999999;
	}
</style>